<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;padding: 0;
			}
			.top{
				height: 48px;
				background-color: #323232;
			}
			.nav{
				height: 48px;
				width: 1109px;
				margin: 0 auto;
			}
			.banner{
				height: 192px;
				overflow: hidden;
				position: relative;
			}
			.banner img{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
			.nav ul{
				display: inline-block;
				list-style: none;
				height:48px ;
				line-height: 48px;
				text-align: center;
				margin-left: 30px;
			}
			.nav ul li{
				float: left;
				width: 87px;
				font-size: 13px;
				color: #a6a6a6;
			}
			.nav ul li:hover{
				background-color: #dd4012;
			}
			.pic{
				float: right;
				line-height: 48px;	
				color: #a6a6a6;
			}
			.nav .pic img{
				
				margin-left: 16px;
			}
			.nav1{
				position: absolute;
				top: 164px;
				height: 28px;
				width: 100%;
				background-color: rgba(0,0,0,0.5);
				z-index: 4;
			}
			.nav1 span{
				display: block;
				width: 1100px;
				margin: 0 auto;
				line-height: 28px;
				word-spacing: 8px;
				color: #a6a6a6;
				font-size: 12px;
			}
			.section{
				width: 100%;
				background-color: #d1d1d1;	
				padding-top: 25px;
				padding-bottom: 120px;	
			}
			.main{
				width: 1100px;
				height: 26px;
				margin: 0px auto;
				padding-bottom: 25px;
			}
			.main ul{
				list-style: none;
			}
			.main li{
				float: left;
				width: 78px;
				height: 26px;
				line-height: 26px;
				margin-right: 5px;
				text-align: center;
				background-color: #ffffff;
				font-size: 12px;
				color: #707070;
			}
			.content{
				width: 1100px;
				height: 1040px;
				margin:0 auto;
			}
			.content div{
				width: 1120px;
			}
			.content li{
				list-style: none;
				width: 260px;
				height: 235px;
				float: left;
				margin-right: 20px;
				background-color: #fff;
				margin-bottom: 32px;
			}
			.content li a{
				text-decoration: none;
			}
			.content li h4{
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #999;
				font-size: 15px;
				color: #000;
				font-weight: normal;
				padding-left: 12px;
				word-spacing: 12px;
			}
			.content li h5{
				height: 38px;
				line-height: 38px;
				color: #939292;
				font-size: 12px;
				font-weight: normal;
				padding-left: 12px;
				word-spacing: 12px;
			}
			.footer{
				height: 80px;
				background-color: #323232;
			}
			.bottom{
				width: 1100px;
				margin: 0 auto;
			}
			.bottom img{
				float: left;
				margin-top: 22px;
			}
			
			.br h4{
				margin-top: 24px;
				font-weight: normal;
				font-size:12px ;
				color: #999999;
				word-spacing: 16px;
				float: right;
			}
			.br p{
				margin-top: 4px;
				color: #666666;
				font-size:12px ;
				word-spacing: 16px;
				float: right;
			}
			.model{
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="top">
			<div class="nav">
				<img src="../imges/2.jpg" >
				<ul>
					<li>网站首页</li>
					<li>传悦资源</li>
					<li>传悦案例</li>
					<li>传悦服务</li>
					<li>解决方案</li>
					<li>需求提交</li>
				</ul>
				<div class="pic">
					<img src="../imges/3.jpg" >0535-6065-2189
					<img src="../imges/4.jpg" >
					<img src="../imges/5.jpg" >
					<img src="../imges/6.jpg" >
					<img src="../imges/7.jpg" >	
				</div>	
			</div>
		</div>
		<div class="banner">
			<img src="../imges/1.jpg" >
			<div class="nav1">
				<span>网站首页> 传悦案例</span>
			</div>
		</div>
		<div class="section">
			<div class="main">
				<ul >
					<li>全部</li>
					<li>网站建设</li>
					<li>推广运营</li>
					<li>品牌策划</li>
					<li>网络全案</li>
				</ul>
			</div> 
			<div class="content">
				<div>
					<ul >
						<li class="model">
							<a href="pra.html">
								<img src="" >
								<h4></h4>
								<h5></h5>
							</a>	
						</li>	
					</ul>
				</div>	
			</div>	
		</div>
		<div class="footer">
			<div class="bottom">
				<img src="../imges/16.jpg" >
				<div class="br">
					<h4>关于传悦 新闻动态 传悦观点 联系传悦 加入传悦 付款账户</h4>
					<p>copyright@2013 创梦网络科技有限公司 || 传悦Chnyoo.cn All Right Reserved 京ICP备12005221号</p>
				</div>
			</div>	
		</div>
		<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let http=new XMLHttpRequest()
			http.open("get","http://10.35.170.143:8080/getcontent");
			http.send()
			http.onreadystatechange=function(){
				if(http.readyState===4){
					let data = JSON.parse(http.responseText)
					let model=$(".model")
					let ul=$(".content ul")
					data.forEach(item=>{
						let newItem = model.clone(true);
						newItem.attr("class","")
						newItem.find("h4").html(item.title)
						newItem.find("h5").html(item.keyword)
						console.log(item.pic)
						console.log(item.id)
						newItem.find("a").attr("href",`pra.html?id=${item.id}`)
						newItem.find("img").attr("src",item.pic)
						newItem.appendTo(ul)
					})
				}
			}
		</script>
	</body>
</html>
